<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
     <% 
String path = request.getContextPath(); 
// 获得项目完全路径（假设你的项目叫MyApp，那么获得到的地址就是 http://localhost:8080/MyApp/）: 
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; 
%> 
<!DOCTYPE html>
<html>
<head>
<base href=" <%=basePath%>"> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="description" content="个人订单">
<meta name="author" content="xwj">
<title>个人订单</title>
<link rel="stylesheet" href="css/user_css/css/bootstrap.min.css" />
        <link rel="stylesheet" href="css/user_css/css/font-awesome.min.css" />
        <!-- Custom CSS -->
        <link href="public_user/style.css" rel="stylesheet">
            <link rel="stylesheet" type="text/css" href="jsutil/sweetalert.css">
  <style type="text/css">
   .container{
 	margin-top:20px;
   }
   .tab-content{
            border-bottom:  1px   solid  #DDDDDD;    /*下边框线*/
            border-left:    1px    solid    #DDDDDD;    /*左边框线  solid实线*/
            border-right:   1px   solid    #DDDDDD;    /*右边框线text-align:center; */ 
        
         }
     .tab-content .shoppingorder-title{
        margin: 15px;
           height: 66px; 
            border-bottom:  2px solid #FFBB00;
          }
     .tab-content .shoppingorder-title span{
              display:block;
             position: relative;
            top:50%;
          transform:translateY(-50%);
         }
    .tab-pane .row {
        height: 200px;
         border-bottom:  2px solid #e3e3e3;    /*下边框线*/
          margin: 15px;
    }
     .tab-pane .row div{
    position: relative;
      top: 50%;
      transform: translateY(-50%);
         
 }

     </style>
        
</head>
<body>
<!--header start-->
     <%@include file="header.jsp"%>
      <!--header end-->
      <!-- heading-banner-start -->
        <div class="heading-banner">
            <div class="container">
                <div class="row">
                    <div class="col-md-12 col-xs-12">
                        <div class="breadcrumb">
                            <a title="Return to Home" href="public_user/index.jsp">
                                <i class="icon-home"></i>
                            </a>
                            <span class="navigation-page">
                                <span class="navigation-pipe">></span>
                               		订单信息
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- heading-banner-end -->
        
       
        <!-- 订单信息区域 -->
  
<div class="container">

<ul class="nav nav-tabs" id="myTab">
  <li class="active"><a href="#allOrder" data-index="0">全部订单</a></li>
  <li><a href="#noFH" data-index="1">未发货</a></li>
  <li><a href="#haveFH" data-index="2">已发货</a></li>
  <li><a href="#finishOrder" data-index="4">已完成</a></li>
</ul>

						<div class="tab-content">
										<div class="row ">
                                    <!-- 标题 -->
                                    <div class="shoppingorder-title">
                                        <span class="col-xs-2 col-md-2 col-sm-2">图片</span> 
                                        <span class="col-xs-2 col-md-2 col-sm-2">商品信息</span> 
                                        <span class="col-xs-1 col-md-1 col-sm-1">单价</span> 
                                        <span class="col-xs-1 col-md-1 col-sm-1">数量</span> 
                                        <span class="col-xs-1 col-md-1 col-sm-1">实付款</span> 
                                        <span class="col-xs-1 col-md-1 col-sm-1">状态</span> 
                                         <span class="col-xs-2 col-md-2 col-sm-2">下单时间</span> 
                                        <span class="col-xs-2 col-md-2 col-sm-2">操作</span>
                                    </div>
                              

										</div>
  									<div class="tab-pane active" id="allOrder">
												<div class="row">
    

								<div class="col-xs-2 col-md-2 col-sm-2 product-img">
                                            <img src="images/books_pic/ddb1.jpg" />
                                        </div>
                                        <div class="col-xs-2 col-md-3 col-sm-3 product-title">
                                            <h5>河流</h5>
                                            <h6>憨爸</h6>
                                            <h5>清华大学出版社</h5>
                                        </div>
                                        <div class="col-xs-1 col-md-1 col-sm-1 product-price price1">
                                            ¥50</div>
                                        <div class="col-xs-1 col-md-1 col-sm-1 product-num">1</div>
                                        <div class="col-xs-1 col-md-1 col-sm-1 product-price price2">
                                            ¥50</div>
                                        <div class="col-xs-2 col-md-2 col-sm-2 order-status">
                                            待发货</div>
                                        <div class="col-xs-2 col-md-2 col-sm-2 product-remove">
                                            <button class="button button-pill button-tiny">删除订单
                                            </button>
                                        </div>

</div>

  </div>



  <div class="tab-pane" id="noFH">介绍内容...</div>
  <div class="tab-pane" id="haveFH">.消息内容..</div>
  <div class="tab-pane" id="finishOrder">.设置内容..</div>
    	<div class="row">
			<div class="col-xs-3 col-md-3 ">
			</div>
			<div class="col-xs-6 col-md-6 col-sm-12 ">
			<jsp:include flush="fasle" page="/jsutil/pagetool.jsp" />
			</div>
			<div class="col-xs-3 col-md-3">
			</div>
			</div>	
</div>
		
</div>
			
         <!--footer start-->
   <%@include file="footer.jsp"%>
   
 <!--footer end-->
   <script src="css/user_css/js/vendor/jquery-1.12.0.min.js"></script>
        <!-- bootstrap js -->
        <script src="css/user_css/js/bootstrap.min.js"></script>
        <!-- owl.carousel js -->
        <script src="css/user_css/js/owl.carousel.min.js"></script>
        <!-- meanmenu js -->
        <script src="css/user_css/js/jquery.meanmenu.js"></script>
        <!-- countdown js -->
        <script src="css/user_css/js/countdown.js"></script>
        <!-- jquery.nivo.slider.pack js -->
        <script src="css/user_css/js/jquery.nivo.slider.pack.js"></script>
        <!-- jquery-ui.min.js -->
        <script src="css/user_css/js/jquery-ui.min.js"></script>
        <!-- wow js -->
        <script src="css/user_css/js/wow.min.js"></script>
        <!-- plugins js -->
        <script src="css/user_css/js/plugins.js"></script>
        <!-- main js -->
        <script src="css/user_css/js/main.js"></script>
        <!-- 分页工具 -->
		<script type="text/javascript" src="jsutil/pagetool.js"></script>
		<!-- 时间处理工具 -->
		<script type="text/javascript" src="jsutil/timeutil.js"></script>
		 
  <script src="jsutil/sweetalert.min.js"></script> 
      <script type="text/javascript">
            var pageNum=1;
            var oState=0;
        $(function(){
        //默认展示第一个tab信息last则是最后一个
        $('#myTab a:first').tab('show');
        	allOrder(pageNum);
    		});
        //点击显示
		$('#myTab a').click(function (e) {
	  	e.preventDefault();
	  	var data=$(this).data('index');
	  	oState=data;
	  	allOrder(1);
	  	$(this).tab('show');
		});
		//订单查询
		function allOrder(pageNum){
			$.ajax({
 				url : 'orderMsg/orderList.do',
 				type : 'POST',
 				async : "true",
 				data : {
 					"num" : pageNum,
 					"ostate":oState
 				},
 				dataType : 'json',
 				success : function(data) {
 				if(data.res>0){
 					var allOrder=$("#allOrder");
 					var noFH=$("#noFH");
 					var haveFH=$("#haveFH");
 					var finishOrder=$("#finishOrder");
 					allOrder.empty();
 					noFH.empty();
 					haveFH.empty();
 					finishOrder.empty();
 					if(data.num==0){
 						var divs="<br><h2 align='center'>暂时没有该分类下的订单信息！！！</h2><br>";
 						allOrder.append(divs);
 					}else{ 
 					$.each(data.list,function(index, element) {
 						//时间处理
						var d = new Date(element.otime);  
						var otime=formatDateTime(d);  
 						var divs="<div class='row'>"
 	 							+"<div class='col-xs-2 col-md-2 col-sm-2 product-img'>"
 	 					        +"<a href='javascript:detail("+element.books.bid+")'><img src='"+element.books.bpicurl+"'/></a>"
 	 					        +"</div>"
 	 					        +"<div class='col-xs-2 col-md-2 col-sm-2 product-title'>"
 	 					          +" <h5>"+element.books.bname+"</h5>"
 	 					          +" <h6>"+element.books.bauthor+"</h6>"
 	 					          +" <h5>"+element.books.bpress+"</h5>"
 	 					        +"</div>"
 	 					        +"<div class='col-xs-1 col-md-1 col-sm-1 product-price price1'>¥"+element.bprice+"</div>"
 	 					        +"<div class='col-xs-1 col-md-1 col-sm-1 product-num'>"+element.onumber+"</div>"
 	 					        +"<div class='col-xs-1 col-md-1 col-sm-1 product-price price2'>¥"+element.oprice*element.onumber+"</div>"
 	 					        +"<div class='col-xs-1 col-md-1 col-sm-1' state></div>"
 	 					      +"<div class='col-xs-2 col-md-2 col-sm-2' otime>"+otime+"</div>"
 	 					        +"<div class='col-xs-2 col-md-2 col-sm-2 product-remove'>"
 	 					          +"<input type='hidden' id='s"+element.oid+"'/>"
 	 					        +"</div>"
 	 					      +"</div>";
 	 					      if(oState==0){
 	 					    	 allOrder.append(divs);
 	 					      }
 	 					      else if(oState==1){
 	 					    	noFH.append(divs);
 	 					      }else if(oState==2){
 	 					    	  haveFH.append(divs);
 	 					      }else if(oState==4){
 	 					    	finishOrder.append(divs);
 	 					      }
 	 					  
 	 					   var p=$("#s"+element.oid).parent();
 	 						var stateInfo=p.prev().prev();
 	 					  if(element.ostate==1){
 	 						p.prepend("<button class='button btn btn-info' onClick='setRemind()'>提醒发货</button>");
 	 						stateInfo.append("<span>待发货</span>");
 	 					}else if(element.ostate==2){
 	 						p.prepend("<button class='button btn btn-success' name='' onclick='changeOrderStatus("+element.oid+",4)'>确定收货</button>");
 	 						stateInfo.append("<span>待收货</span>");
 	 					}else if(element.ostate==3){
 	 						p.prepend("<button class='button button-pill button-tiny' name='' onclick=''>立即评价</button>");
 	 						stateInfo.append("<span>待评价</span>");
 	 					}else if(element.ostate==4){
 	 						p.prepend("<button class='button btn btn-primary' name='' onclick='detail("+element.books.bid+")'>商品详情</button>");
 	 						stateInfo.append("<span>已完成</span>");
 	 					}
 						
 						
 					});
 					 
 					setPage(pageNum, data.totalPage, "allOrder");
 					}
 					
 				}
 				}
 			});
 			
			
		}
		//确定收货
		function changeOrderStatus(oid,ostate){
			 swal(
		                {title:"您确定收到货了吗",
		                    text:"收货后将无法恢复，请谨慎操作！",
		                    type:"warning",
		                    showCancelButton:true,
		                    confirmButtonColor:"#DD6B55",
		                    confirmButtonText:"确定！",
		                    cancelButtonText:"取消",
		                    closeOnConfirm:false,
		                    closeOnCancel:false
		                },
		                function(isConfirm)
		                {
		                    if(isConfirm)
		                    {
		                    	$.ajax({
		            				url : 'orderMsg/changeOrderStatus.do',
		            				type : 'POST',
		            				async : "true",
		            				data:{"oid":oid,
		            				"ostate":ostate	
		            				},
		            				dataType : 'json',
		            				success : function(data) {
		            					if (data.res>0) {
		            						sweetAlert("成功", "操作成功!", "success");
		            						 allOrder(1);
		            						
		            					}else{
		            						sweetAlert("失败", "未收货成功！", "error");
		            					}
		            				}
		            			});
		                    }
		                    else{
		                        swal({title:"已取消",
		                            text:"您取消了操作！",
		                            type:"error"})
		                    }
		                }
		            )
			
		}
		//发货提醒
	function setRemind(){
		sweetAlert("提醒成功", "已通知店主，请耐心等待！", "success");
		}
	
        </script>

</body>
</html>